<template>
    <div class="timeLimit">
        <div class="Top">限时抢购</div>
        <ul>
            <li v-for="(item,i) in time" :key="item.time" :class="{active:index == i}" @click="index = i">
                <span>{{item.time}}:00</span>
                <CountDown :endHours='item.time'/>
            </li>
        </ul>
        <div class="shop">
            <div  v-for="item in oneList2" :key="item.productName">
                <router-link class="shopList" :to="'/topic'+item.productId">
                    <img :src="$store.state.imgsrc+item.productsImg" alt="">
                    <div class="right">
                        <h2>{{item.productName}}</h2>
                        <p>领券再减20，到手价98元</p>
                        <b>
                            <span class="bSpan1">已抢{{item.sales}}</span>
                            <span class="bSpan2">剩余{{item.total-item.sales}}</span>
                        </b>
                        <p><span class="pSpan1">¥ {{(item.productPrice * 0.6).toFixed(1)}}</span>
                            <span class="pSpan2">¥ {{item.productPrice}}</span>
                        </p>
                    </div>
                <el-button class="button" type="warning" round>去抢购</el-button>
                </router-link>
            </div>
        </div>
        <div class="foot"></div>
    </div>
</template>

<script>
import {homeOne} from '@/api'
    export default {
        data(){
            return{
                index:2,
                time:[
                    {
                        time:8
                    },
                     {
                        time:14
                    },
                     {
                        time:20
                    },
                     {
                        time:22
                    },
                ],
                shopList:[
                    {
                        name:'美恩女款跑步鞋',
                        kucun:'100',
                        all:'300',
                        price:'50',
                        lastPrice:'389'
                    },
                    {
                        name:'美恩女款跑步鞋1',
                        kucun:'100',
                        all:'300',
                        price:'50',
                        lastPrice:'389'
                    },
                    {
                        name:'美恩女款跑步鞋2',
                        kucun:'100',
                        all:'300',
                        price:'50',
                        lastPrice:'389'
                    },
                    {
                        name:'美恩女款跑步鞋3',
                        kucun:'100',
                        all:'300',
                        price:'50',
                        lastPrice:'389'
                    }
                ],
                oneList2:[]
            }
        },
         methods:{
            getHomeOne(){
                homeOne({
                    discounts:2
                }).then(res=>{
                    // console.log(res,'homeone')
                    this.oneList2 = res.data.data
                })
            }
        },
        mounted(){
            this.getHomeOne()
        }
    }
</script>

<style scoped>
.timeLimit{
    position: relative;
    overflow: hidden;
}
.Top{
    color: #cc6600;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 10px;
    margin: 0 auto;
    width: 80vw;
    text-align: center;
    height: 8vh;
    line-height: 8vh;
    background: #f4dcb4;
    font-size: 28px;
    margin-top: 1vh;
}
ul{
    margin-top: 8vh;
    height: 13vh;
    background: #f9e7d2;
    display: flex;
}
li{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    text-align: center;
    justify-content: center;
    color: #999999;
}
li.active{
    color: #FF380D;
    border-bottom: 0.5vh solid #FF380D;
}
span{
    margin-bottom: 1vh;
}
img{
    width: 35vw;
    height: 18vh;
    margin-top: 1vh;
}
.shopList{
    position: relative;
    display: flex;
    margin-top: 0.5vh;
    height: 20vh;
    margin-left: 1vw;
}
h2{
    color: #666666;
    font-weight: normal;
    font-size: 3vh;
}
p{
    color: #FF380D;
}
b{
    background: #f9f1e8;
    border-radius: 10px;
    font-weight: normal;
    font-size: 12px;
}
.bSpan2{
    margin-left: 15vw;
    color: #FF380D;
}
.pSpan1{
    font-size: 18px;
}
.pSpan2{
    margin-left: 3vw;
    text-decoration: line-through;
    font-size: 14px;
    color: #999999;
}
.right{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-left: 1vw;
}
.button{
    position: absolute;
    right: 3vw;
    bottom: -1vh;
}
.foot{
    margin-top: 2vh;
    width: 100vw;
    background: #eeeeee;
    height: 1vh;
}
</style>